<template>
        <div class="sound" v-if="trackList?.length">
            <!-- <div class="soundtop">
                <div class="soundtitle">'{{keyword}}'&nbsp;&nbsp;相关的声音</div>
                <div class="soundmore">更多 ></div>
            </div> -->
            <div class="soundcontent">
                <div class="sounditem" v-for="(item,index) in trackList" :key="index"
                @click="routerHandler('sound',item.trackInfo.id)">
                    <!-- class="iconfont icon-icon-video-play-fill" -->
                    <div class="playimgblock">
                        <img class="sounditemimg" :src="item.trackInfo.cover_path" alt="">
                        <van-icon name="play"  class="playicon"/>
                    </div>
                    <div class="content">
                        <div class="title">{{item.trackInfo.title}}</div>
                        <div class="contentbottom">
                            <div class="name">
                                <van-icon name="manager-o" class="manage"/>
                                <span class="nickname">{{item.trackInfo.nickname}}</span>
                            </div>
                            <div class="num">
                                <van-icon name="underway-o" />
                                <span class="no">{{Math.floor(item.trackInfo.duration/60).toString().padStart(2, '0')+'.'+(item.trackInfo.duration%60).toString().padStart(2, '0')}}</span>
                            </div>
                            <div class="play">
                                <van-icon name="audio" class="audio"/>
                                <span class="playnum">{{simplifyNum(item.trackInfo.count_play)}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</template>

<script setup lang="ts">
import {onMounted, ref, onBeforeUnmount, onUpdated,watch} from 'vue'
import {reqTrackList, type trackInfoModel} from '../../api/search'
import { useRouter } from "vue-router";

const router = useRouter()
const props = defineProps(['keyword'])


const value = ref(props.keyword)
let kw = ref("")
// onUpdated(() => {
//     kw.value = props.keyword
// })
watch(() => props.keyword,(nval) => {
    // console.log(nval);
    value.value = nval
    trackList.value = []
    getTrackList()
},{deep:true})

// 单位转换
function simplifyNum(number: number) {
  let str_num = 0;
  if (number >= 1e4 && number < 1e8) {
    str_num = number / 1e4;
    return str_num.toFixed(2) + "万";
  } else if (number >= 1e8 && number < 1e10) {
    str_num = number / 1e8;
    return str_num.toFixed(2) + "亿";
  } else {
    //一千以下
    return number;
  }
}






onMounted(() => {
    kw.value = props.keyword
    getTrackList()
    window.addEventListener('scroll', handleScroll, true);
})

onBeforeUnmount(() => {
    window.removeEventListener('scroll', handleScroll, true);
})

let isLock = true
function handleScroll() {
    //scrollTop  【滚动条顶部】距离【页面】顶部的距离
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    //windowHeight  视口高度
    const windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
    //scrollHeight  可滚动的总高度
    const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    //滚动条到底部的条件
    if (scrollTop + windowHeight >= scrollHeight-30) {
        if (more) {
            if (isLock) {
                isLock = false
                page.value++;
                // console.log(page.value);
                getTrackList()
                
            }
        }
    }
    
}



const trackList = ref<trackInfoModel[]>([])
const page = ref<number>(1)
const more = ref<number>(1)
const getTrackList = async () => {
    let res = await reqTrackList(value.value,page.value)
    if (res.data.trackViews.pageSize===20) {
        more.value = 1
    }else {
        more.value = 0
    }
    trackList.value.push(...res.data.trackViews.tracks)
    isLock = true
}

// 路由跳转事件
const routerHandler = (type:string,id:number) => {
  router.push(`/${type}/${id}`)
}
</script>

<style scoped lang="scss">
    .sound {
        width: 375px;
        box-sizing: border-box;
        
        .soundtop {
            margin: 12px 12px 0 12px;
            display: flex;
            justify-content: space-between;
            padding: 12px 15px 0px;
            .soundtitle {
                font-size: 18px;
                color: #40404c;
            }
            .soundmore {
                font-size: 12px;
                color: #aaa;
            }
        }
        .soundcontent {
            .sounditem {
                padding: 8px 10px 8px 20px;
                display: flex;
                border-bottom: 1px solid #e1e1e1;
                .playimgblock {
                    position: relative;
                    
                    .sounditemimg {
                        width: 50px;
                        height: 50px;
                        border-radius: 50%;
                    }
                    .playicon {
                        position: absolute;
                        left: 16px;
                        top: 16px;
                        color: #fff;
                        font-size: 20px;
                    }
                }
                .content {
                    flex: 1;
                    width: 260px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    margin: 0 10px;
                    .title {
                        font-size: 16px;
                        margin-bottom: 5px;
                        color: #40404c;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                    }
                    .contentbottom {
                        display: flex;
                        align-items: center;
                        color: #999;
                        font-size: 11px;
                        height: 20px;
                        line-height: 20px;
                        .name {
                            display: flex;
                            align-items: center;
                            .nickname {
                                margin-left: 5px;
                            }
                            .manage {
                                font-size: 13px;
                            }
                        }
                        .num {
                            display: flex;
                            align-items: center;
                            margin: 0 10px;
                            .no {
                                margin-left: 5px;
                            }
                            .icon-sound-wave {
                                color: #999;
                                font-size: 17px;
                            }
                        }
                        .play {
                            display: flex;
                            align-items: center;
                            .playnum {
                                margin-left: 5px;
                            }
                            .audio {
                                font-size: 15px;
                            }
                        }
                    }
                }
                .icon-icon-video-play-fill {
                    color: #a3a3ac;
                    font-size: 26px;
                }
            }
        }
    }
</style>